<script setup lang="ts">
import { getAll } from '@/api/menus'
import type { MenuItem } from '@/api/menus'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
// 存储返回的数据
const allMenus = ref([] as MenuItem[])

// 获取数据的完整逻辑
const getAllMenus = async () => {
    const {data} = await getAll()
    // console.log(res)
    if(data.code==="000000"){
        allMenus.value = data.data
    }else{
        ElMessage.error("获取菜单信息失败！");
        throw new Error("获取菜单信息失败！");
    }
}
getAllMenus()
// <!-- 2021010513   罗玉琼 -->
</script>

<template>
<!-- 2021010513   罗玉琼 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
  </el-breadcrumb>
   <el-row :gutter="20">
    <el-col :span="5">
        <div class="grid-content content1">
          <div>
            <p><span>18</span>门</p>
            <p>课程数量</p>
          </div>
            <el-icon size="40"><IEpCalendar /></el-icon>
        </div>
    </el-col>
    <el-col :span="5">
        <div class="grid-content content2">
          <div>
            <p><span>145</span>人</p>
            <p>学员数量</p>
          </div>  
            <el-icon size="40"><IEpMenu /></el-icon>
        </div>
    </el-col>
    <el-col :span="5">
        <div class="grid-content content3">
          <div>
            <p><span>99.9</span>G</p>
            <p>在线空间</p>
          </div>  
            <el-icon size="40"><IEpHistogram /></el-icon>
        </div>
    </el-col>
    <el-col :span="5">
        <div class="grid-content content4">
          <div>
            <p><span>94.34</span>G </p>
            <p>剩余流量</p>
          </div>  
            <el-icon size="40"><IEpMug /></el-icon>
        </div>
    </el-col>
  </el-row>
<el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="router.push('/menus/create')">添加菜单</el-button>
      </div>
    </template>
    <el-table :data="allMenus" border style="width: 100%">//绑定数据
    <el-table-column prop="date" label="序号" width="180" type="index" align="center"/>
    <el-table-column prop="name" label="菜单名称" align="center"/>
    <el-table-column prop="level" label="菜单层级" width="180" align="center"/>
    <el-table-column prop="icon" label="菜单图标" align="center"/>
    <el-table-column prop="orderNum" label="排序" align="center"/>
    <el-table-column label="操作" align="center">
        <el-button type="primary">编辑</el-button>
        <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
  </el-card>
  
</template>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  width: auto;
  height: 80px;
}
.el-col:nth-child(1){
  background-color: rgb(70, 139, 242);
}
.el-col:nth-child(2){
  background-color: rgb(228, 37, 37);
}
.el-col:nth-child(3){
  background-color: rgb(138, 184, 176);
}
.el-col:nth-child(4){
  background-color: rgb(244, 150, 246);
}
.el-col {
  border-radius: 4px;
  margin-left: 20px;
  // background-color: blue;
  padding-top: 15px;
}
.grid-content{
display: flex;
padding-left: 20px;
}
.grid-content span{
    font-size: 25px;
}
.el-icon{
    width: 80px;
    // height: 60px;
    margin-left: 60px;
}
</style>